<#if model??>
${"<!-- "+ model.tableDesc +"管理  @author " + model.authorNm + " -->"}
<template>
    <div class="sub-route">
        <section class="app-section">
            <div>
                <div class="road">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ name: 'index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item style="color:#1c82d4">${model.tableDesc}管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <div style="height:40px;line-height:30px;margin-top:10px">
                    <!--操作区域-->
                    <el-button type="primary" size="small" @click.native.prevent="onAdd()">添加</el-button>

                    <el-form :inline="true" class="demo-form-inline" style="float:right;">
                        <#list model.columns as column>
                        <#if column.key=="PRI">
                        <#else>
                        <el-form-item label="${column.columnDesc}">
                            <#if column.columnType=="datetime">
                                <el-date-picker size="small" style="width: 235px;" v-model="tableForm.${column.columnName}" type="date" value-format="yyyy-MM-dd" placeholder="${column.columnDesc}"></el-date-picker>
                            <#elseif column.columnType=="date">
                                <el-date-picker size="small" style="width: 235px;" v-model="tableForm.${column.columnName}" type="date" value-format="yyyy-MM-dd" placeholder="${column.columnDesc}"></el-date-picker>
                            <#--<#elseif column.columnType=="3">-->

                            <#else>
                                <el-input size="small" placeholder="输入${column.columnDesc}" v-model="tableForm.${column.columnName}" style="display:inline-block;width: 120px;"></el-input>
                            </#if>
                        </el-form-item>
                        </#if>
                        </#list>
                        <el-form-item :inline="true">
                            <#--<el-input size="small" placeholder="输入科室名称" v-model="departName" style="display:inline-block;width: 160px;"></el-input>-->
                            <!-- 搜索 -->
                            <el-button type="info" size="small" @click="searchData()">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--列表-->
                <el-table
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%;margin-top:20px;z-index:0;" >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <#list model.columns as column>
                    <el-table-column prop="${column.columnName}" label="${column.columnDesc}" align="center"></el-table-column>
                    </#list>
                    <el-table-column fixed="right" label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="onEdit(scope.$index, scope.row)" size="mini" type="primary" icon="el-icon-edit" circle ></el-button>
                            <el-button @click.native.prevent="onDelete(scope.$index, scope.row)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block" style="text-align: right; padding-top: 20px;">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageRecords">
                    </el-pagination>
                </div>
                <div style="height: 80px;"></div>
            </div>
        </section>

        <!--编辑页面-->
        <editPage v-if="editVisible" ref="editPage" @getData="getData"></editPage>

        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
// 编辑页面
import editPage from './edit'
import { Loading } from 'element-ui'
export default {
  components: {
    editPage
  },
  data () {
    return {
      // 是否显示编辑页面
      editVisible: false,
      // 表格加载框
      tableLoading: false,
      // 页码
      pageNo: 1,
      // 每页条数
      pageSize: 10,
      // 总记录
      pageRecords: 0,
      // 表格数据对象
      tableData: [],
      // 表格搜索条件表单
      tableForm: {}
    }
  },
  mounted () {
    // 初始化数据
    this.initData()
  },
  methods: {
    // 添加
    onAdd () {
      this.editVisible = true
      this.${"$"}nextTick(() => {
        this.${"$"}refs.editPage.init()
      })
    },
    // 编辑
    onEdit (index, row) {
    <#list model.columns as column>
        <#if column.key=="PRI">
      var ${column.columnName} = row.${column.columnName}
        </#if>
    </#list>
      this.editVisible = true
      this.${"$"}nextTick(() => {
        this.${"$"}refs.editPage.init(<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>)
      })
    },
    // 删除
    onDelete (index, row) {
        <#list model.columns as column>
            <#if column.key=="PRI">
      var ${column.columnName} = row.${column.columnName}
            </#if>
        </#list>
      this.${"$"}confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loadingInstance = Loading.service({ fullscreen: true })
        // 开始请求接口
        this.${"$"}axios({
        method: 'post',
        url: '/${model.model}/${model.className?uncap_first}/delete',
        params: {
        <#list model.columns as column>
            <#if column.key=="PRI">
            ${column.columnName}: ${column.columnName}
            </#if>
        </#list>
        }
        }).then(res => {
          loadingInstance.close()
          this.${"$"}log('删除成功', res)
          this.${"$"}message({
            type: 'success',
            message: '删除成功!'
          })
          this.getData()
        })
        .catch(err => {
          loadingInstance.close()
          this.${"$"}log('错误信息', err)
        })
      }).catch(() => {
        this.${"$"}message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询接口列表数据
    getData () {
        this.tableLoading = true
        this.tableForm.pageNo = this.pageNo
        this.tableForm.pageSize = this.pageSize
        // 开始请求接口
        this.${"$"}axios({
            method: 'get',
            url: '/${model.model}/${model.className?uncap_first}/page',
            params: this.tableForm
        })
        .then(res => {
            this.tableLoading = false
            this.${"$"}log('查询结果', res)
            this.tableData = res.data.results
            this.pageRecords = res.data.totalRecord
        })
        .catch(err => {
            this.tableLoading = false
            this.${"$"}log('错误信息', err)
        })
    },
    // 初始化数据
    initData () {
      this.pageNo = 1
      this.pageSize = 10
      this.initSelectData()
      this.getData()
    },
    // 查询
    searchData () {
      this.pageNo = 1
      this.getData()
    },
    // 初始化下拉框
    initSelectData () {
    },
    // 每页数据量变化时
    handleSizeChange (val) {
      console.log(`每页 ${"$"}{val} 条`)
      this.pageNo = 1
      this.pageSize = val
      this.getData()
    },
    // 页码变化时
    handleCurrentChange (val) {
      console.log(`当前页: ${"$"}{val}`)
      this.pageNo = val
      this.getData()
    }
  }
}
</script>


</#if>